﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>物资编码解析系统</title>
	<%--基础css--%>
	<link href="/jsp/common/css/bootstrap.min.css" rel="stylesheet">
	<link href="/jsp/common/css/font-awesome.min.css" rel="stylesheet">
	<link href="/jsp/common/css/bootstrap-extend.css" rel="stylesheet">
	<link href="/jsp/common/css/validate.css" rel="stylesheet">
	<%--基础js--%>
	<script type="text/javascript" src="http://nervgh.github.io/js/es5-shim.min.js"></script>
	<script type="text/javascript" src="http://nervgh.github.io/js/es5-sham.min.js"></script>
	<script type="text/javascript" src="./js/console-shim.js"></script>
	<script src="/jsp/common/js/jquery.min.js"></script>
	<script src="/jsp/common/js/bootstrap.min.js"></script>
	<script src="/jsp/common/js/angular.min.js"></script>
	<script src="/jsp/common/js/ng-file-upload-all.min.js"></script>
	<script type="text/javascript" src="./js/angular-file-upload.min.js"></script>

	<%--自定义angular module--%>
	<script src="/jsp/common/template/baseModule.js"></script>
	<script src="/jsp/common/js/module/dateRangeModule.js"></script>
	<%--日期处理--%>
	<!-- <link href="/jsp/common/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="/jsp/common/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/jsp/common/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="/jsp/common/js/moment.min.js"></script> -->
</head>

<body ng-app="m" ng-controller="c" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter"
	ng-init='index = "管理文件"'>
	<jsp:include page="./nav.jsp" />

	<div class="container" style="width: 98%;">
		<div class="panel m-t-lg">
			<!-- <div style="height:50px;line-height: 50px;font-size:larger;font-weight: bolder;">
				选择文件类型
				<select ng-model="selectType" ng-options="x.type as x.name for x in factoryType">
				</select>
			</div> -->

			<div class="panel-heading">

				<div class="clearfix" style="display: flex;">
					<div>
						<h4>选择文件</h4>
						<div ng-show="uploader.isHTML5">
							<!-- 3. nv-file-over uploader="link" over-class="className" -->
							<div class="well my-drop-zone" nv-file-over="" uploader="uploader">
								请将文件拖拽至此处
							</div>
						</div>
					</div>
					<div style="margin-left: 80px;
						padding-top: 40px;">上传文件
						<input type="file" nv-file-select="" uploader="uploader" multiple />
					</div>
					<div style="margin-left: 80px;
						padding-top: 40px;">
						上传文件夹
						<input type="file" nv-file-select="" uploader="uploader" webkitdirectory directory multiple />
					</div>
					<!-- <div style="margin-left: 80px;
						padding-top: 60px;">
						物资编码识别及信息表
						<button ng-click="getTable1()">查看</button>
					</div> -->

				</div>
			</div>
			<h3>上传队列</h3>
			<p>当前上传个数:{{ uploader.queue.length }}</p>

			<table class="table table-hover table-striped isPrint" style="table-layout: fixed">
				<thead>
					<th width="10%">
						<span>电厂</span>
					</th>
					<th width="10%">
						<span>文件编码</span>
					</th>
					<th width="10%">
						<span>spv相关</span>
					</th>
					<th width="20%">
						<span>文件名</span>
					</th>
					<th width="9%">
						<span>文件大小</span>
					</th>
					<th width="20%">
						<span>上传进度</span>
					</th>
					<th width="10%">
						<span>当前状态</span>
					</th>
					<th width="10%">
						<span>提取编码数</span>
					</th>
					<th width="10%">
						<span>现有编码数</span>
					</th>
					<th width="10%">
						<span>失效编码数</span>
					</th>
					<th width="10%">
						<span>失效占比</span>
					</th>
					<!-- <th width="10%">
						<span>推荐编码数</span>
					</th> -->
					<th width="10%">
						<span>全部冻结（工厂级）</span>
					</th>
					<th width="10%">
						<span>冻结采购（工厂级）</span>
					</th>
					<th width="10%">
						<span>全部冻结（集团级）</span>
					</th>
					<th width="10%">
						<span>冻结采购（集团级）</span>
					</th>
					<th width="30%">
						<span>操作</span>
					</th>
				</thead>
				<tbody>
					<tr ng-repeat="item in uploader.queue">
						<td>
							<span>{{item.fac}}</span>
						</td>
						<td>
							<span>{{item.fileNum}}</span>
						</td>
						<td>
							<span>{{item.spv}}</span>
						</td>
						<td class="single-line"><strong>{{ item.file.name }}</strong></td>
						<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
						<td ng-show="uploader.isHTML5">
							<div class="progress" style="margin-bottom: 0;">
								<div class="progress-bar" role="progressbar"
									ng-style="{ 'width': item.progress + '%' }">{{item.progress}}%</div>
							</div>
						</td>
						<td class="text-center">
							<span ng-hide="item.isReady||item.isSuccess||item.isCancel||item.isError"><i
									class="glyphicon glyphicon-record"></i>未上传</span>
							<span ng-show="item.isReady&&!item.isUploading"><i
									class="glyphicon glyphicon-flag"></i>准备上传</span>
							<span ng-show="item.isUploading&&item.progress!=100"><i
									class="glyphicon glyphicon-flash"></i>上传中...</span>
							<span ng-show="item.isCancel&&!item.isReady"><i
									class="glyphicon glyphicon-ban-circle"></i>上传取消</span>
							<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i>上传失败</span>
							<span ng-show="item.isUploading&&item.progress===100"><i
									class="glyphicon glyphicon-flash"></i>解析中</span>
							<span ng-show="item.isSuccess&&!item.isCorrect"><i
									class="glyphicon glyphicon-remove"></i>解析失败</span>
							<span ng-show="item.isSuccess&&item.isCorrect"><i
									class="glyphicon glyphicon-right"></i>解析成功</span>
						</td>
						<td>
							<span>{{item.RightNum+item.FaultNum}}</span>
						</td>
						<td>
							<span>{{item.RightNum?item.RightNum:0}}</span>
						</td>
						<td>
							<span>{{item.FaultNum?item.FaultNum:0}}</span>
						</td>
						<td>
							<span>{{item.FaultRate?item.FaultRate:0}}</span>
						</td>
						<!-- <td>
							<span>{{item.recNum}}</span>
						</td> -->
						<td>
							<span>{{item.FacAF}}</span>
						</td>
						<td>
							<span>{{item.FacFB}}</span>
						</td>
						<td>
							<span>{{item.GpAF}}</span>
						</td>
						<td>
							<span>{{item.GpFB}}</span>
						</td>
						<td nowrap>
							<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()"
								ng-hide="item.isReady || item.isUploading || item.isCorrect">
								<span class="glyphicon glyphicon-upload"></span> 上传
							</button>
							<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()"
								ng-hide="!item.isUploading&&!item.isReady">
								<span class="glyphicon glyphicon-ban-circle"></span> 取消
							</button>
							<button type="button" class="btn btn-default btn-xs" ng-show="item.isCorrect">
								<span class="glyphicon glyphicon-download"></span>
								<a href="{{item.wordPath}}" target="_blank">下载</a>
							</button>
							<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
								<span class="glyphicon glyphicon-trash"></span> 移除
							</button>
							<button type="button" class="btn btn-default btn-xs" ng-show="item.isCorrect"
								ng-click="getTable1(item.fileName)">
								<span class="glyphicon glyphicon-eye-open"></span> 查看
							</button>

						</td>
					</tr>
				</tbody>
			</table>

			<div style="position:fixed;bottom:5px;display: flex;justify-content:left;align-items: center;">
				<div class="progress" style="display: inline-block;width: 500px;margin-bottom:0">
					<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }">
					</div>
				</div>
				<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()">
					<span class="glyphicon glyphicon-upload"></span> 上传所有
				</button>
				<button type="button" class="btn btn-success btn-s" ng-click="uploadAgain()">
					<span class="glyphicon glyphicon-upload"></span> 重新上传
				</button>
				<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()"
					ng-disabled="!uploader.isUploading">
					<span class="glyphicon glyphicon-ban-circle"></span> 取消所有
				</button>
				<button type="button" class="btn btn-danger btn-s" ng-click="removeSuccessFile()"
					ng-disabled="!uploader.queue.length">
					<span class="glyphicon glyphicon-trash"></span> 移除成功文件
				</button>
				<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()"
					ng-disabled="!uploader.queue.length">
					<span class="glyphicon glyphicon-trash"></span> 移除所有
				</button>
				<button type="button" class="btn btn-default btn-s" ng-click="getResultByNameList()"
					ng-disabled="!isAllResultShow">
					<span class="glyphicon glyphicon-download"></span> 下载所有
				</button>
			</div>
		</div>
	</div>
	<script>
		angular.module("m", ["nm", "angularFileUpload"])
			.controller("c", function ($scope, page, ajax, entity, $filter, md5, alertService, FileUploader) {
				$scope.filename = "test";
				$scope.fileNameList = [];
				// $scope.factoryType = [{
				// 	name: "秦一厂",
				// 	type: 0
				// }, {
				// 	name: "秦二厂",
				// 	type: 1
				// }, {
				// 	name: "秦三厂",
				// 	type: 2
				// }
				// ];
				$scope.selectType = 0;

				var uploader = $scope.uploader = new FileUploader({
					url: '/analysis/analysis',
					alias: $scope.filename,
					formData: [{ "type": $scope.selectType }]
				});

				// 过滤器
				uploader.filters.push({
					name: 'customFilter',
					fn: function (item /*{File|FileLikeObject}*/, options) {
						return this.queue.length < 100000;
					}
				});

				// CALLBACKS
				uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
					console.info('添加文件失败', item, filter, options);
				};
				uploader.onAfterAddingFile = function (fileItem) {
					console.info('添加文件后', fileItem);
					console.log('uploader', uploader, $scope.uploader);
				};
				uploader.onAfterAddingAll = function (addedFileItems) {
					console.info('添加所有文件', addedFileItems);
				};
				uploader.onBeforeUploadItem = function (item) {
					// console.log($scope.selectType);
					item.formData = [{ "type": $scope.selectType }];
					console.info('onBeforeUploadItem', item);
				};
				uploader.onProgressItem = function (fileItem, progress) {
					//将文件本名赋给alias
					uploader.alias = fileItem.file.name;
					$scope.uploader.alias = fileItem.file.name;
					// console.info('onProgressItem', fileItem, progress);
				};
				uploader.onProgressAll = function (progress) {
					console.info('onProgressAll', progress);
				};
				uploader.onSuccessItem = function (fileItem, response, status, headers) {
					// console.info('onSuccessItem', fileItem, response, status, headers);
					//成功之后可以查看单个文件记录
					$scope.fileNameList.push(fileItem.file.name);
					let index = uploader.getIndexOfItem(fileItem);

					if (response.code === 0) {
						//上传成功之后获取正确率并加入item
						uploader.queue[index].fac = response.fac;
						uploader.queue[index].fileNum = response.fileNum;
						uploader.queue[index].spv = response.spv == "是" ? "是" : "否";
						uploader.queue[index].fileName = response.fileName ? response.fileName : null;
						uploader.queue[index].recNum = response.recNum ? response.recNum : 0;
						uploader.queue[index].FacAF = response.FacAF ? response.FacAF : 0;
						uploader.queue[index].FacFB = response.FacFB ? response.FacFB : 0;
						uploader.queue[index].GpAF = response.GpAF ? response.GpAF : 0;
						uploader.queue[index].GpFB = response.GpFB ? response.GpFB : 0;

						uploader.queue[index].RightNum = response.RightNum ? response.RightNum : 0;
						uploader.queue[index].FaultNum = response.FaultNum ? response.FaultNum : 0;
						let totalNum = response.FaultNum + response.RightNum;
						let FaultRate = ((response.FaultNum / totalNum) * 100).toFixed(2) + "%";
						uploader.queue[index].FaultRate = totalNum ? FaultRate : 0;

						uploader.queue[index].wordPath = response.wordPath ? response.wordPath : '#'
						uploader.queue[index].isCorrect = true;
					} else {
						uploader.queue[index].wordPath = '#'
						uploader.queue[index].isCorrect = false;
					}
				};
				uploader.onErrorItem = function (fileItem, response, status, headers) {
					console.info('上传失败', fileItem, response, status, headers);
				};
				uploader.onCancelItem = function (fileItem, response, status, headers) {
					console.info('取消上传', fileItem, response, status, headers);
				};
				uploader.onCompleteItem = function (fileItem, response, status, headers) {
					// console.info('onCompleteItem', fileItem, response, status, headers);

				};
				uploader.onCompleteAll = function () {
					console.info('全部完成');
					// 成功之后可以查看所有文件记录
					$scope.isAllResultShow = true;
					// 打开表2
					$scope.getTable2();
				};

				// 重新上传上传失败的文件
				$scope.uploadAgain = function () {
					console.info('重新上传', uploader.queue);
					for (let i = 0; i < uploader.queue.length; i++) {
						if (uploader.queue[i].isError) {
							uploader.uploadItem(uploader.queue[i])
						}
					}
				}

				// 移除上传成功的文件
				$scope.removeSuccessFile = function () {
					console.info('移除上传成功的文件', uploader.queue);
					let removeQueue = []
					uploader.queue.map(item => {
						if (item.isSuccess) {
							removeQueue.push(item)
						}
					})
					removeQueue.map(item => {
						uploader.removeFromQueue(item)
					})
				}

				// 查看物资编码识别及信息表1
				$scope.getTable1 = function (filename) {

					// 拼接文件名数组
					let fileNameList = []
					// 查看单个文件
					if (filename) {
						fileNameList = [filename]
					} else {
						fileNameList = uploader.queue.map(item => {
							return item.fileName
						})
					}
					console.log('查看物资编码识别及信息表', fileNameList)

					if (fileNameList.length) {
						$scope.tableData1 = [];
						$.ajax({
							url: "/analysis/getOneFileResult",
							type: "POST",
							contentType: "application/json",
							data: JSON.stringify(fileNameList),
							success: function (data) {

								let list = [];
								for (let i = 0; i < data.list.length; i++) {
									list = list.concat(data.list[i]);
									console.log(list);
								}
								console.log("表一", list);

								$scope.tableData1 = list;
								$scope.entityTable1._openModal("view", list);
								// $('#modalTable1').modal()
							}
						});
					}
				}


				// 查看物资编码识别结果统计表2
				$scope.getTable2 = function () {
					// 拼接文件名数组
					const fileNameList = uploader.queue.map(item => {
						return item.fileName
					})
					console.log('查看物资编码识别结果统计表', fileNameList)

					if (fileNameList.length) {
						$.ajax({
							url: "/analysis/getOneFileAnalysis",
							type: "POST",
							contentType: "application/json",
							data: JSON.stringify(fileNameList),
							success: function (data) {
								let list = data.list;
								// 计算疑似比率并插入
								list = list.map((item) => {
									let totalNum = item.fault_num + item.right_num;
									let FaultRate =
										((item.fault_num / totalNum) * 100).toFixed(2) + "%";
									item.fault_per = totalNum ? FaultRate : 0;
									return item;
								});
								$scope.tableData2 = list;
								$scope.entityTable2._openModal("view");
							}
						});
					}
				}

				$scope.getResult = function (filename) {
					window.open("/jsp/upload/result.jsp?filename=" + filename);
				};
				$scope.getResultByNameList = function () {
					console.log($scope.fileNameList);
					var filenameStr = "";
					for (var i = 0; i < $scope.fileNameList.length; i++) {
						if (i === 0) {
							filenameStr = filenameStr + $scope.fileNameList[i];
						}
						else {
							filenameStr = filenameStr + ";" + $scope.fileNameList[i];
						}
					}
					// session.setAttribute("filenameList",$scope.fileNameList);
					window.open("/jsp/upload/result.jsp?filename=" + filenameStr);
					// window.open("/jsp/upload/result.jsp");
					//跳转之后禁用查看全部
					$scope.isAllResultShow = false
				}

				// 打开表1模态框
				$scope.entityTable1 = entity.getEntity(
					{},
					{},
					function (action, row) {//beforeOpen
						if ($scope.entityTable1.action === "view") {

						}
					}, function () {//submit
					}, "table1Modal");

				// 打开表2模态框
				$scope.entityTable2 = entity.getEntity(
					{},
					{},
					function (action, row) {//beforeOpden
						if ($scope.entityTable2.action === "view") {

						}
					}, function () {//submit
					}, "table2Modal");
			});
	</script>
	<div entity-modal-view="table1Modal" title="物资编码识别及信息表" e="entityTable1">
		<entity-modal-view-body>
			<table class="table table-striped" style="background-color: #ffffff">
				<thead>
					<tr>
						<th>电厂</th>
						<th>文件编码</th>
						<th>spv相关</th>
						<th>文件名</th>
						<th>文件大小</th>
						<th>物资编码</th>
						<th>识别状态分类</th>
						<!-- <th>推荐的物资编码</th> -->
						<th>物料状态（工厂级）</th>
						<th>物料状态（集团级）</th>
						<th>备件分级</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="x in tableData1">
						<td>{{x.fac}}</td>
						<td>{{x.file_num}}</td>
						<td>{{x.spv}}</td>
						<td>{{x.file_name}}</td>
						<td>{{x.file_size}}</td>
						<td>{{x.code}}</td>
						<td>{{x.state}}</td>
						<!-- <td>{{x.e}}</td> -->
						<td>{{x.factory_state}}</td>
						<td>{{x.group_state}}</td>
						<td>{{x.cpn_level}}</td>
					</tr>
				</tbody>
			</table>
		</entity-modal-view-body>
	</div>
	<div id="modalTable1" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
		aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">物资编码识别及信息表</h4>
				</div>
				<div class="modal-body">
					<table class="table table-striped" style="background-color: #ffffff">
						<thead>
							<tr>
								<th>电厂</th>
								<th>文件编码</th>
								<th>spv相关</th>
								<th>文件名</th>
								<th>文件大小</th>
								<th>物资编码</th>
								<th>识别状态分类</th>
								<!-- <th>推荐的物资编码</th> -->
								<th>物料状态（工厂级）</th>
								<th>物料状态（集团级）</th>
								<th>备件分级</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="x in tableData1">
								<td>{{x.fac}}</td>
								<td>{{x.file_num}}</td>
								<td>{{x.spv}}</td>
								<td>{{x.file_name}}</td>
								<td>{{x.file_size}}</td>
								<td>{{x.code}}</td>
								<td>{{x.state}}</td>
								<!-- <td>{{x.e}}</td> -->
								<td>{{x.factory_state}}</td>
								<td>{{x.group_state}}</td>
								<td>{{x.cpn_level}}</td>
							</tr>
						</tbody>
					</table>
				</div>

			</div>
		</div>
	</div>
	<div entity-modal-view="table2Modal" title="物资编码识别结果表" e="entityTable2">
		<entity-modal-view-body>
			<table class="table table-striped" style="background-color: #ffffff">
				<thead>
					<tr>
						<th>电厂</th>
						<th>文件编码</th>
						<th>spv相关</th>
						<th>文件名</th>
						<th>文件大小</th>
						<th>提取编码数</th>
						<th>现有编码数</th>
						<th>失效编码数</th>
						<th>失效占比</th>
						<!-- <th>推荐编码数</th> -->
						<th>全部冻结（工厂级）</th>
						<th>冻结采购（工厂级）</th>
						<th>全部冻结（集团级）</th>
						<th>冻结采购（集团级）</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="x in tableData2">
						<td>{{x.fac}}</td>
						<td>{{x.file_num}}</td>
						<td>{{x.spv}}</td>
						<td>{{x.file_name}}</td>
						<td>{{x.file_size}}</td>
						<td>{{x.right_num+x.fault_num}}</td>
						<td>{{x.right_num}}</td>
						<td>{{x.fault_num}}</td>
						<td>{{x.fault_per}}</td>
						<!-- <td>{{x.rec_num}}</td> -->
						<td>{{x.facAF_num}}</td>
						<td>{{x.facFB_num}}</td>
						<td>{{x.gpAF_num}}</td>
						<td>{{x.gpFB_num}}</td>
					</tr>
				</tbody>
			</table>
		</entity-modal-view-body>
	</div>
	<style>
		th,
		td {
			text-align: center;
		}

		.btn {
			border-radius: 25px;
		}

		.btn-group-xs>.btn,
		.btn-xs {
			border-radius: 20px;
		}

		.my-drop-zone {
			border: dotted 3px lightgray;
			width: 200px;
		}

		.nv-file-over {
			border: dotted 3px red;
		}

		/* Default class applied to drop zones on over */
		.another-file-over-class {
			border: dotted 3px green;
		}

		html,
		body {
			height: 100%;
		}

		.btn.btn-s {
			margin-left: 20px;
		}
	</style>
</body>

</html>